import React, { memo } from "react";
import { useSelector, shallowEqual } from "react-redux";

import { formatMonthDay } from "@/utils/format-utils";

import HYSongOperationBar from "@/components/song-operation-bar";
import { RankingHeaderWrapper } from "./style";

export default memo(function HYRankingHeader() {
  const { playLists } = useSelector(
    (state) => ({
      playLists: state.getIn(["ranking", "playLists"]),
    }),
    shallowEqual
  );
  return (
    <RankingHeaderWrapper>
      <div className="image">
        <img src={playLists.coverImgUrl} alt="" />
        <span className="image_cover">封面</span>
      </div>
      <div className="info">
        <div className="title">{playLists.name}</div>
        <div className="time">
          <i className="clock sprite_icon2"></i>
          <div>最近更新：{formatMonthDay(playLists.updateTime)}</div>
          <div className="update-f">(每日更新:TODO)</div>
        </div>
        <HYSongOperationBar
          favorTitle={`${playLists.subscribedCount}`}
          shareTitle={`${playLists.shareCount}`}
          downTitle="下载"
          commentTitle={`${playLists.commentCount}`}
        />
      </div>
    </RankingHeaderWrapper>
  );
});
